<template>
  <div style="padding:10px">
     <main-layout>
      <div>
        <div class="back-view">
          <div class="title vxe-icon-feedback" >支付订单
          </div>
          <div class="back " @click="onClose">
            <vxe-button  size="small" content="返回" icon="vxe-icon-undo"></vxe-button>
          </div>
        </div>
        <div class="pay-view">
               <div>
                <i class="vxe-icon-check pay-icon" />
               </div>
              <el-form label-width="20px" class="show-box">
                <el-form-item style="margin-bottom: 0;font-size: 16px;font-weight: bold;">
                  订单提交成功！去付款咯~
                </el-form-item>
                <el-form-item  style="margin-bottom: 0;">
                  
                  请在 <Countdown :totalSeconds="1200" />分钟内容完成支付，超时后将取消订单
                </el-form-item>
                <el-form-item  style="margin-bottom: 0;">
                  收款信息：某某 136****6512 重庆铜梁吕峰镇某某村
                </el-form-item>
              </el-form>
              <div class="update-address">
                <div>应收总额：<span style="font-size:20px;color: red;">230</span>元</div>
                <div style="padding-top:10px">订单详情</div>
              </div>
            </div>
        <el-form >
      </el-form>
       </div>
    </main-layout>
</div> 
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import mainLayout from '@/components/custom/mainLayout.vue'
import { VXETable } from 'vxe-table'
import { useRouter } from 'vue-router'
import Countdown from './components/countdown.vue'
const router = useRouter()
const formdata = ref({})
const addFlag = ref(false)
const orderList = ref([])

onMounted(async () => {
  let obj = JSON.parse(localStorage.getItem('set-order-list'))
  console.log(obj,'=========')
  if(obj){
    orderList.value =obj.omsSettleOrderVoList ||[]
    formdata.value = obj
  }
})

const onClose = ()=>{
  router.push(`/factor/purchase/list`)
}



</script>
<style lang="scss" scoped>
.pay-icon{
  border-radius: 90px;
    padding: 20px;
    border: 2px solid #04AE70;
    font-size: 30px;
    color: #04AE70;
}
.pay-view{
  width: 100%;
          position: relative;
          display: flex;
          align-items: center;
}
.back-view{
    display: flex;
    justify-content: space-between;
    padding: 0 10px 15px 0;
    align-items: center;
    border-bottom:1px solid #ddd;
    margin-bottom:20px;
    .title{
      font-size:15px;
      font-weight: bold;
      color:#565656;
      position: relative;  


      text-indent:6px;
    }
    .title::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
  .back{
    font-size:15px;
    color:#888;
    cursor: pointer;
  }
}
.update-address{
    position: absolute;
    text-align: center;
    right: 20px;
    top: 50%;
    margin-top: -15px;
    color: #333;
    cursor: pointer;
}
</style>
